<template>
    <div class="upImgList">
        <div :class="index%3==0?'noLeft upImgItem':'upImgItem'" :key="index" v-for="(item,index) in imgArr">
            <img :src="item.img+ossSrc" />
            <div @click="delImgFn(index)" class="delIcon iconfont icon-shangchuan"></div>
        </div>
        <div :class="imgArr.length%3==0?'noLeft upImgItem':'upImgItem'">
            <div class="upImg iconfont icon-shangchuan"></div>
            <input multiple ref="file" type="file" @change="upImgFn($event)" />
        </div>
    </div>
  </template>
  
  <script>
    export default {
      components: {},
      data() {
        return {
          imgArr:this.propImg,
          upMoreImgLoad:false,
        }
      },
      props: {
        icon:{},
        propImg:Array
      },
      methods:{
        delImgFn(index){
            this.imgArr.splice(index,1)
            this.$emit('successUpImg',this.imgArr)
        },
        upImgFn(e){
            if(!this.upMoreImgLoad){
                let fileArr = e.target.files
                if(fileArr.length == 0){
                    return false
                }
                this.upMoreImgLoad= true
                const loading = this.$loading({
                    lock: true,
                    text: '上传中,请耐心等待~',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                for(let i =0;i<fileArr.length;i++){
                    setTimeout(()=>{
                        var fileObj = fileArr[i]; //获得文件上传的输入框的文件流
                        var formData = new FormData();// 可以增加表单数据
                        formData.append("file",fileObj);
                        $.ajax({
                            url:this.apis+'/common/Upload/UpImg',
                            dataType:"json",
                            type:'post',
                            processData : false,
                            contentType : false,
                            data:formData,
                            success:(res)=>{
                                if(res.code==1){
                                    this.imgArr.push({img:res.data.src})
                                    this.$emit('successUpImg',this.imgArr)
                                }else{
                                    this.$message(res.msg)
                                }
                                if(i==fileArr.length-1){
                                    loading.close();
                                    this.upMoreImgLoad= false
                                }
                            },
                            error:(res)=>{
                                loading.close();
                                this.upMoreImgLoad = false
                                this.$message('上传超时')
                            }
                        })
                    })
                }
            }
            
          },
      },
      mounted(){
      },
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  .upImgList{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        .upImgItem{
            width:100px;
            margin-right: 20px;
            height: 100px;
            border-radius: 5px;
            background-color: #f7f8fa;
            position: relative;
            margin-bottom: 20px;
            overflow: hidden;
            .upImg{
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 100px;
                font-size: 40px;
                color: #ccc;
            }
            input{
                width: 100%;
                height: 100%;
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
            }
            img{
                width: 100%;
            }
            .delIcon{
                position: absolute;
                top: 0;
                right: 0;
                font-size: 18px;
                color: #fff;
                width: 30px;
                height: 30px;
                background-color: black;
                text-align: center;
                line-height: 30px;
                border-radius: 0px 0px 0 15px;
            }
        }
    }
  </style>
  